<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>友情链接</title>
    <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="../assets/css/link.css" />
  </head>
  <body>
    <!-- 友情链接页面 -->
    <div class="layui-card">
      <div class="layui-card-header">
        <span>友情链接</span>
        <!-- 右上按钮 -->
        <button type="button" class="layui-btn layui-btn-normal">
          添加链接
        </button>
      </div>
      <!-- 链接表头 -->
      <div class="layui-card-body">
        <table class="layui-table">
          <colgroup>
            <col width="5%" />
            <col width="15%" />
            <col width="20%" />
            <col width="30%" />
            <col width="10%" />
            <col width="20%" />
          </colgroup>
          <thead>
            <tr>
              <th>ID</th>
              <th>链接图标</th>
              <th>链接名称</th>
              <th>链接地址</th>
              <th>链接描述</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="tb">
            <!-- 这里储存内容 -->
          </tbody>
        </table>
      </div>
    </div>
    <!-- 准备模版 点击添加弹出的form表单 -->
    <script type="text/html" id="formAdd">
      <form class="layui-form formAdd formAddright">
        <div class="layui-form-item">
          <label class="layui-form-label">链接名称</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="linkname"
              placeholder="请输入链接名称"
              autocomplete="off"
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">链接地址</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="linkurl"
              placeholder="请输入链接地址"
              autocomplete="off"
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">链接描述</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="linkdesc"
              placeholder="请输入链接描述"
              autocomplete="off"
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <!-- 上传文件图标 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-sm btn-input">
              <i class="layui-icon">&#xe67c;</i>
              上传图片
            </button>
            <input
              type="file"
              name="linkicon"
              id="linkFile"
              lay-verify="required"
              style="display: none;"
            />
            <img id="preIcon" src="" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn quitAdd" lay-submit lay-filter="formDemo">
              提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
              重置
            </button>
          </div>
        </div>
      </form>
    </script>
    <!-- 准备模版 渲染友情链接表格列表 -->
    <script type="text/html" id="linkShow">
      {{each data v i}}
      <tr>
        <td>{{v.id}}</td>
        <td>
          <div class="bg">
            <img src="http://localhost:8888/uploads/{{v.linkicon}}" />
          </div>
        </td>
        <td>{{v.linkname}}</td>
        <td>{{v.linkurl}}</td>
        <td>{{v.linkdesc}}</td>

        <td>
          <button
            type="button"
            class="layui-btn layui-btn-xs editBtn"
            data-id="{{v.id}}"
          >
            编辑
          </button>
          <button
            type="button"
            class="layui-btn layui-btn-danger layui-btn-xs delBtn"
            data-id="{{v.id}}"
          >
            删除
          </button>
        </td>
      </tr>
      {{/each}}
    </script>
    <!-- 准备模版 编辑友情链接弹出的form表单 -->
    <script type="text/html" id="editAdd">
      <form class="layui-form formAdd editAdd" lay-filter="editAdd">
        <input type="text" name="id" class="layui-hide" />
        <div class="layui-form-item">
          <label class="layui-form-label">链接名称</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="linkname"
              placeholder=""
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">链接地址</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="linkurl"
              placeholder=""
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">链接描述</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="linkdesc"
              placeholder=""
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <!-- 上传文件图标 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-sm editBTN">
              <i class="layui-icon">&#xe67c;</i>
              上传图片
            </button>
            <input
              type="file"
              name="linkicon"
              id="editFile"
              style="display: none;"
            />
            <img id="preIcon" src="" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn quitAdd" lay-submit lay-filter="formDemo">
              提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
              重置
            </button>
          </div>
        </div>
      </form>
    </script>
    <script src="../assets/lib/jquery.js"></script>
    <script src="../assets/lib/layui/layui.all.js"></script>
    <script src="../assets/lib/template-web.js"></script>
    <script src="../assets/js/common.js"></script>
    <script src="../assets/js/link/link.js"></script>
  </body>
</html>
